 <template>
  <div class="filtrate-outer-box">
    <Header />
    <div class="detail-box" v-loading="loading">
      <div class="area1190 flex mobile-box">
        <div class="left-img-info">
          <div class="img-box">
            <img :src="bannerImgUrl | nopic" alt="" />
          </div>
          <div class="banner-list">
            <el-carousel :interval="4000" height="120px">
              <el-carousel-item v-for="(item, index) in productBannerData" :key="index">
                <div class="flex jd-c group-banner-box">
                  <img :class="{ active: v.active }" :src="v.img1x" v-for="(v, k) in item" @mouseenter="setBanner(v)" @mouseleave="leaveBanner(v)" :key="k" />
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
        <div class="right-detail-info">
          <h4 class="product-title">
            {{ productdetilNow.productCategoryName }}{{ productdetilNow.name }}
          </h4>
          <p class="product-des">
            {{ productdetilNow.subTitle }}
          </p>
          <div class="price-info-box">
            <div class="price-row">
              <span class="title">意向金：</span><span class="price"> ￥{{ productdetilNow.price }}</span>
            </div>
            <div class="price-row">
              <span class="title">优惠：</span><span class="text">购车免费送价值3000元防疫配置包</span>
            </div>
          </div>

          <div class="product-num-box">
            <span>商品数量：</span>
            <el-input-number v-model="productData.num" @change="handleChange" size="mini" :min="1" :max="10" label="描述文字"></el-input-number>
            <span class="inventory">库存数量：<span>{{ productdetilNow.stock }}</span>件</span>
          </div>

          <div class="btn-box">
            <el-button type="danger" plain @click="goBuy">立即购买</el-button>
            <el-button type="warning" plain @click="consult()">在线询价</el-button>
            <el-button type="info" plain @click="clickFavorite" :disabled="isLike">
              <i class="el-icon-star-off" :class="isLike?'like':''"></i> 喜欢
            </el-button>  
          </div>

          <div class="commitment">
            <span class="title">服务承诺：</span>
            <span><i class="el-icon-success"></i>意向金可退还</span>
            <span><i class="el-icon-success"></i>官方直销</span>
            <span><i class="el-icon-success"></i>价格透明</span>
            <span><i class="el-icon-success"></i>品质保证</span>
          </div>
        </div>
      </div>
    </div>
    <!--<div class="arguments-box">-->
    <!--<div class="area1190">-->
    <!--<h2 class="arguments-title">可选参数配置</h2>-->
    <!--<div class="arguments-table">-->
    <!--<ul class="tab-ul">-->
    <!--<li>用途及底盘</li>-->
    <!--<li>内饰</li>-->
    <!--<li>外观</li>-->
    <!--<li>电器</li>-->
    <!--<li>其他选项</li>-->
    <!--<li>座椅及安全带</li>-->
    <!--</ul>-->
    <!--<div class="arguments-inner-box flex jc-fs">-->
    <!--<div class="item flex">-->
    <!--<div class="title">车辆类型</div>-->
    <!--<el-select class="select-type">-->
    <!--<option value="单位团体">单位团体</option>-->
    <!--</el-select>-->
    <!--</div>-->
    <!--<div class="item flex">-->
    <!--<div class="title">车辆类型</div>-->
    <!--<el-select class="select-type">-->
    <!--<option value="单位团体">单位团体</option>-->
    <!--</el-select>-->
    <!--</div>-->
    <!--<div class="item flex">-->
    <!--<div class="title">车辆类型</div>-->
    <!--<el-select class="select-type">-->
    <!--<option value="单位团体">单位团体</option>-->
    <!--</el-select>-->
    <!--</div>-->
    <!--<div class="item flex">-->
    <!--<div class="title">车辆类型</div>-->
    <!--<el-select class="select-type">-->
    <!--<option value="单位团体">单位团体</option>-->
    <!--</el-select>-->
    <!--</div>-->
    <!--<div class="item flex">-->
    <!--<div class="title">车辆类型</div>-->
    <!--<el-select class="select-type">-->
    <!--<option value="单位团体">单位团体</option>-->
    <!--</el-select>-->
    <!--</div>-->
    <!--<div class="item flex">-->
    <!--<div class="title">车辆类型</div>-->
    <!--<el-select class="select-type">-->
    <!--<option value="单位团体">单位团体</option>-->
    <!--</el-select>-->
    <!--</div>-->
    <!--<div class="item flex">-->
    <!--<div class="title">车辆类型</div>-->
    <!--<el-select class="select-type">-->
    <!--<option value="单位团体">单位团体</option>-->
    <!--</el-select>-->
    <!--</div>-->
    <!--<div class="item flex">-->
    <!--<div class="title">车辆类型</div>-->
    <!--<el-select class="select-type">-->
    <!--<option value="单位团体">单位团体</option>-->
    <!--</el-select>-->
    <!--</div>-->
    <!--</div>-->
    <!--</div>-->
    <!--</div>-->
    <!--</div>-->

    <div class="product-info-box">
      <div class="area1190">
        <div class="left-product-list">
          <h3 class="box-title">热销车型</h3>
          <div class="item flex" v-for="val in recomendProducts" :key="val.id">
            <img class="item-left-img" :src="val.pic | nopic" alt="" />
            <div class="item-right-box">
              <p class="car-name">{{ val.productSn }}</p>
              <a class="shop-btn" @click="toBuyCar(val.productId)">立即抢购</a>
            </div>
          </div>
        </div>
        <div class="right-product-info">
          <ul class="right-product-tab">
            <li :class="{ c_active: 1 == listIndex }" @click="detail(1)">
              图文详情
            </li>
            <li :class="{ c_active: 2 == listIndex }" @click="detail(2)">
              配置参数
            </li>
            <!--<li :class="{ c_active:3 == listIndex }"  @click="detail(3)">购车须知</li>-->
          </ul>
          <div class="product-content">
            <div v-show="listIndex == 1" v-html="detailinfo"></div>
            <div v-show="listIndex == 2">
              <div style="
                  height: 40px;
                  border: 1px solid #ebeef5;
                  line-height: 40px;
                  background-color: #f5f7fa;
                  color: #606266;
                  font-size: 14px;
                ">
                基本信息
              </div>
              <el-table :data="tableData" :border="true" style="width: 100%">
                <el-table-column :show-header="false" prop="paramValue" width="180">
                </el-table-column>
                <el-table-column :show-header="false" prop="paramName">
                </el-table-column>
              </el-table>
              <br />
              <el-table :data="skuList" :border="true" :span-method="objectSpanMethod" style="width: 100%">
                <el-table-column style="background-color: red" prop="configname" label="项目">
                </el-table-column>
                <el-table-column prop="selectvalue" label="配置描述">
                </el-table-column>
                <el-table-column label="标准版" prop="paramValue">
                </el-table-column>
              </el-table>
            </div>

            <div v-show="listIndex == 3"></div>
          </div>
        </div>
      </div>
    </div>

    <Footer />
  </div>
</template>

<script>
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";
import empty from "../utils/common";
export default {
  name: "ProductDetail",
  components: {
    Header,
    Footer,
  },
  data() {
    return {
      productBannerData: {
        0: [],
      },
      listIndex: 1,
      bannerImgUrl:
        "http://www.kechehome.com/upload/201910/16/201910161917153693.jpg",
      productData: {
        num: 0,
      },
      product: [],
      productdetilNow: [],
      userinfo: {},
      loading: false,
      detailinfo: "",
      tableData: [],
      skuList: [],
      recomendProducts: [],
      isLike: false
    };
  },
  created() {
    this.product = this.$route.query;
    if (empty(this.product.id)) {
      this.product.id = this.product.productId;
    }
    this.getDetail();
    this.bannerImgUrl = this.product.pic;
    let imgs = "";
    if (this.product.albumPics) imgs = this.product.albumPics.split(",");
    for (var i = 0; i < imgs.length; i++) {
      let obj = new Object();
      obj.img1x = imgs[i];
      obj.img2x = imgs[i];
      obj.hrefUrl = imgs[i];
      obj.isActive = false;
      this.productBannerData[0].push(obj);
    }

    this.userinfo = JSON.parse(localStorage.getItem("userinfo"));
    this.detail(1);
    this.getBasicInfo();
    this.table = this.mergeTableRow(this.skuList, ["checkRoom", "appointmentTime"]);
    this.getCollect()
  },
  methods: {
    //获取收藏列表
    getCollect() {
      this.$http.get('/member/collection/listProduct/1', {
        page: 1,
        size: 1000,
        memberId: 1
      }).then((response) => {
        if(response && response.data.length > 0)
          this.isLike = response.data.some(item => item.productId == parseInt(this.product.id))
        console.log(this.isLike)
      })
    },
    handleChange() { },

    setBanner(v) {
      this.bannerImgUrl = v.img2x;
      v.active = true;
    },
    leaveBanner(v) {
      v.active = false;
    },
    goBuy() {
      if (empty(this.productdetilNow.price)) {
        this.$message({
          showClose: true,
          message: "意向金不能为空",
          type: "error",
        });
        return false;
      }
      this.productdetilNow.buyNum = this.productData.num;
      this.$router.push({ path: "/confirmOrder", query: this.productdetilNow });
    },
    consult() {
      this.$router.push({ path: "/buyCar", query: this.productdetilNow });
    },
   async getDetail() {
      this.loading = true;
     await this.$http.get("/product/updateInfo/" + this.product.id)
        .then((response) => {
          this.productdetilNow = response.data;
          this.recomendProducts = response.data.recomendProducts;
          this.detailinfo = this.productdetilNow.detailHtml;
          this.loading = false;
        });
    },
    clickFavorite() {
      this.addFavorite();
    },
    addFavorite() {
      this.$http
        .post("/member/collection/addProduct", {
          productPrice: this.productdetilNow.price,
          productId: this.product.id,
          productName: this.productdetilNow.name,
          productPic: this.productdetilNow.pic,
          productSkuId: 1,
          productSubTitle: this.productdetilNow.subTitle,
          memberId: this.userinfo.id,
        })
        .then((response) => {
          this.$message({
            showClose: true,
            message: response.message,
            type: "success",
          });
          this.getCollect()
        });
    },
    async toBuyCar(val) {
      this.product.id = val;
      await this.getDetail();
      await this.goBuy();
    },
    detail(val) {
      this.listIndex = val;
      switch (val) {
        case 1:
          this.detailinfo = this.productdetilNow.detailHtml;
          break;
        case 2:
          this.detailinfo = "";
          break;
        case 3:
          this.detailinfo = "";
          break;
        default:
          this.detailinfo = this.productdetilNow.detailHtml;
      }
    },
    getBasicInfo() {
      this.loading = true;
      this.$http
        .get("/car-center/getByAttributeValue/" + this.product.id)
        .then((response) => {
          this.tableData = response.data;
          window.console.log(this.tableData);
          this.loading = false;
        });
      this.loading = true;
      this.$http
        .get("/car-center/getByChoose/" + this.product.id)
        .then((response) => {
          let list = [];
          for (let outIndex in response.data) {
            for (let innerIndex in response.data[outIndex]) {
              list.push(response.data[outIndex][innerIndex]);
            }
          }
          this.skuList = list;
          window.console.log(this.tableData);
          this.loading = false;
        });
    },
    objectSpanMethod({ rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex % 2 === 0) {
          return {
            rowspan: 2,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
    mergeTableRow(data, merge) {
      if (!merge || merge.length === 0) {
        return data;
      }
      merge.forEach((m) => {
        const mList = {};
        data = data.map((v, index) => {
          const rowVal = v[m];
          if (mList[rowVal]) {
            mList[rowVal]++;
            data[index - (mList[rowVal] - 1)][m + "-span"].rowspan++;
            v[m + "-span"] = {
              rowspan: 0,
              colspan: 0,
            };
          } else {
            mList[rowVal] = 1;
            v[m + "-span"] = {
              rowspan: 1,
              colspan: 1,
            };
          }
          return v;
        });
      });
      return data;
    },
  }
};
</script>

<!--<style lang="scss" scoped>-->
<style lang="scss">
/**********************/
.wscnph { max-width: 100%;}
    
.c_active {
  color: #fc291d !important;
}
.el-table th {
  background-color: #f5f7fa !important;
}

.filtrate-outer-box {
  background: #fff;
  .detail-box {
    padding-top: 32px;
    .left-img-info {
      width: 490px;
      margin-right: 30px;
      .img-box {
        img {
          width: 490px;
          height: 311px;
          
        }
      }
      .banner-list {
        width: 520px;
        height: 120px;
        overflow: hidden;
        img {
          width: 113px;
          height: 113px;
          margin-right: 10px;
          margin-top: 10px;
          cursor: pointer;
          border: 1px solid transparent;
        }
        img.active {
          width: 113px;
          height: 113px;
          border: 1px solid #bebebe;
        }
      }
    }
    .right-detail-info {
      text-align: left;
      width: 600px;
      .product-title {
        height: 24px;
        font-size: 24px;
        line-height: 24px;
        color: #212121;
      }
      .product-des {
        height: 14px;
        font-size: 14px;
        line-height: 14px;
        color: #a1a1a1;
        margin-top: 14px;
      }
      .price-info-box {
        margin-top: 37px;
        padding: 0 30px;
        width: 100%;
        height: 160px;
        background-color: #fafafa;
        border: solid 1px #dcdcdc;
        .price-row {
          margin-top: 39px;
          .title {
            height: 16px;
            font-size: 16px;
            line-height: 16px;
            color: #383838;
          }
          .price {
            height: 28px;
            font-size: 28px;
            line-height: 28px;
            color: #e60012;
          }
          .text {
            height: 16px;
            font-size: 16px;
            line-height: 16px;
            color: #383838;
          }
        }
      }
      .product-num-box {
        margin-top: 36px;
        padding-left: 30px;
        span {
          height: 26px;
          font-size: 16px;
          line-height: 26px;
          color: #333333;
        }
        .inventory {
          margin-left: 22px;
        }
      }

      .btn-box {
        margin-top: 50px;
      }

      .commitment {
        margin-top: 42px;
        span {
          height: 14px;
          font-size: 14px;
          line-height: 14px;
          color: #b0b0b0;
          margin-right: 10px;
        }
        .title {
          height: 14px;
          font-size: 14px;
          line-height: 14px;
          color: #7a7a7a;
        }
      }
    }
  }
  .arguments-box {
    padding-top: 50px;
    .arguments-title {
      text-align: left;
      height: 24px;
      font-size: 24px;
      line-height: 24px;
      color: #3f3f3f;
    }
    .arguments-table {
      margin-top: 23px;
      border: solid 1px #dcdcdc;
      width: 100%;
      min-height: 290px;
      .tab-ul {
        width: 1150px;
        height: 50px;
        border-bottom: solid 1px #dcdcdc;
        padding: 0 20px;
        li {
          float: left;
          height: 50px;
          font-size: 16px;
          line-height: 50px;
          color: #3f3f3f;
          margin-right: 52px;
          cursor: pointer;
        }
        .active {
          color: #e01919;
        }
      }
      .arguments-inner-box {
        padding: 22px 0 0 20px;
        flex-wrap: wrap;
        .item {
          margin-bottom: 14px;
          margin-right: 15px;
          width: 372px;
          .title {
            width: 185px;
            height: 50px;
            line-height: 50px;
            background-color: #fff2f2;
          }
          .select-type {
            margin-left: 1px;
            width: 186px;
            height: 50px;
            line-height: 50px;
            background-color: #eeeeee;
            text-align: center;
            text-align-last: center;
            /deep/ .el-input__inner {
              border: none;
              background-color: #eeeeee;
            }
          }
        }
        .item:nth-child(3n) {
          margin-right: 0;
        }
      }
    }
  }
  .product-info-box {
    margin: 30px;
    overflow: hidden;
    .left-product-list {
      float: left;
      width: 245px;
      border: solid 1px #dcdcdc;
      height: auto;
      .box-title {
        width: 245px;
        height: 50px;
        line-height: 50px;
        background-color: #eaeaea;
        font-size: 18px;
        color: #454545;
      }
      .item {
        padding: 0 10px;
        border-top: solid 1px #dcdcdc;
        .item-left-img {
          width: 92px;
          height: 92px;
        }
        .item-right-box {
          text-align: left;
          .car-name {
            margin-top: 30px;
            height: 18px;
            font-size: 18px;
            line-height: 18px;
            color: #454545;
          }
          .shop-btn {
            cursor: pointer;
            display: inline-block;
            margin-top: 10px;
            height: 14px;
            font-size: 14px;
            line-height: 14px;
            color: #888888;
          }
        }
      }
    }

    .right-product-info {
      float: left;
      width: 920px;
      min-height: 400px;
      border: solid 1px #dcdcdc;
      margin-left: 20px;
      .right-product-tab {
        height: 50px;
        border-bottom: solid 1px #dcdcdc;
        padding: 0 20px;
        li {
          float: left;
          height: 50px;
          font-size: 16px;
          line-height: 50px;
          color: #3f3f3f;
          margin-right: 52px;
          cursor: pointer;
        }
      }
    }
  }
}
.like {
  color: red;
}
/*手机端*/
@media (min-width: 320px) and (max-width: 800px) {
  .filtrate-outer-box {
    .detail-box {
      padding: 0;
      .mobile-box {
        display: block;
        width: 100%;
        .left-img-info {
          width: 100%;
          img {
            width: 100%;
            height: auto;
          }
          .banner-list {
            display: none;
          }
        }
        .right-detail-info {
          .product-title {
            width: 100%;
            padding-left: 20px;
          }
          .product-des {
            padding-left: 20px;
          }
          .price-info-box {
            margin-top: 0;
            padding-left: 20px;
            width: 100%;
            height: auto;
            border: 0;
            background-color: #fff;
            .price-row {
              margin-top: 20px;
            }
          }

          //数量区域
          .product-num-box {
            margin-top: 20px;
            padding-left: 20px;
            .inventory {
              display: block;
              margin-left: 0;
              margin-top: 20px;
            }
          }
          .btn-box {
            margin-top: 20px;
            padding-left: 20px;
          }
          .commitment {
            .title {
              display: none;
            }
            padding-left: 20px;
            width: 100%;
            margin-top: 30px;
          }
        }
      }
    }
    .product-info-box {
      margin: 20px;
      .area1190 {
        width: 100%;
        .left-product-list {
          display: none;
        }
        .right-product-info {
          width: 100%;
          margin: 0;
          min-height: 100px;
          box-sizing: border-box;
        }
      }
    }
  }
}

</style>